<ng-container *ngIf="showConsole$ | async let showConsole;">
    <mat-toolbar class="ama-log-history-toolbar">
        <span class="ama-log-history-toolbar-title">Log history for</span>
            <mat-select placeholder="All" [(ngModel)]="filterType" (selectionChange)="changeFilter()" class="ama-log-history-filters">
                <mat-option *ngFor="let filter of filters" [value]="filter">
                    {{filter.displayName | translate}}
                </mat-option>
            </mat-select>
        <div class="ama-log-history-controls">
            <button mat-icon-button data-automation-id='collapse' (click)="toggleConsole()" class="ama-log-expand">
                <mat-icon>expand_more</mat-icon>
            </button>
            <button mat-icon-button data-automation-id='deleteLogs' (click)="clearLogs()">
                <mat-icon>delete_sweep</mat-icon>
            </button>
            <button mat-icon-button data-automation-id='collapse' (click)="toggleConsole()" class="ama-log-close">
                <mat-icon class="ama-log-close">close</mat-icon>
            </button>
        </div>
    </mat-toolbar>
    <modelingsdk-log-history class="ama-log-history" [messages]="logs$ | async"></modelingsdk-log-history>
</ng-container>
<mat-toolbar class="ama-editor-footer-toolbar">
    <div class="ama-editor-footer-toolbar-left">
        <div class="loading-indicator" *ngIf="editorFooterService.inProgress$ | async">
            <mat-progress-spinner color="primary" mode="indeterminate" diameter="20"></mat-progress-spinner>
        </div>
    </div>
    <div class="ama-editor-footer-toolbar-right">
        <div class="ama-footer-user-message">{{ editorFooterService.userMessage$ | async | translate }}</div>
        <div class="ama-message-indicator" [class.ama-inactive]="!(editorFooterService.isNewError$ | async)"
            (click)="toggleConsole()">
            {{ editorFooterService.newErrorNumber$ | async }}
        </div>
    </div>
</mat-toolbar>
